<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>船员管理</a-breadcrumb-item>
          <a-breadcrumb-item>船员调令</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <div>
          <span class="mr5"><a-button type="primary" size="small" :loading="addLoading" @click="handleOpenAdd"> <template #icon><PlusOutlined/> </template>新增</a-button></span>
        </div>
        <a-form layout="inline"
                autocomplete="off">
          <a-form-item label="预计上/下船时间">
            <a-range-picker v-model:value="dateArr" value-format="YYYY-MM-DD" format="YYYY-MM-DD"/>
          </a-form-item>
          <a-form-item label="船员姓名">
            <a-input v-model:value="queryParams.keyword" size="small"  style="width: 160px;height: 32px" placeholder="请输入船员姓名&离船原因" allow-clear/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click.prevent="handleSearch" size="small">
              <SearchOutlined/>搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :columns="columns"
               rowClassName="items"
               :loading="false"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :pagination="false"
               :data-source="tableData"
               size="small" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex==='shangChuanYuanShenFenHao'">
            <cc-id-card :idcard="record.shangChuanYuanShenFenHao"></cc-id-card>
          </template>
          <template v-if="column.dataIndex==='leiXing'">
            <div class="flex justify-center">
              <span v-if="record.leiXing==1">轮换船员</span>
              <span v-if="record.leiXing==2">仅有上船</span>
              <span v-if="record.leiXing==3">仅有下船</span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'shenPiZhuangTai'">
              <div class="mr5 pointer" @click="handleShowEdit(record.id)">
                审批中
              </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="primary" size="small" @click="handleShowEdit(record.id)">审批</a-button>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
      <add-transfer ref="addRef" @success="handleLoadData"></add-transfer>
      <add-transfer-detail ref="showRef" @success="handleLoadData"></add-transfer-detail>
    </div>
  </div>
</template>
<script lang="ts" setup>
const dateArr = ref([])
import AddTransfer from "./compoments/AddTransfer.vue"
import AddTransferDetail from "./compoments/AddTransferDetail.vue"

const tableData = ref([])
const total = ref(0)
const pages = ref(0)
const addLoading = ref(false)
const tableLoading = ref(false)
const addRef = ref({})
const showRef = ref({})
const pageSizeOptions = ref(['15', '20', '30', '40', '50'])
const queryParams = reactive({
  "pageNo": 1,
  "pageSize": 20,
  "keyword":"",
  "startDate": "",
  "endDate": ""
})

// 获取选择的行id
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

// 定义表格的列信息
const columns = [
  {
    title: '序号',
    fixed: "left",
    align:"center",
    width: 60,
    dataIndex: 'index',
    customRender: ({text, record, index}) =>  index + 1
  },
  {
    title: '调令单号',
    align:"center",
    dataIndex: 'diaoLingDanHao',
    width: '180px',
  },
  {
    title: '调令类型',
    align:"center",
    dataIndex: 'leiXing',
    width: '180px',
  },
  {
    title: '所在船舶',
    align:"center",
    dataIndex: 'suoZaiChuanBo',
    width: '100px',
  },
  {
    title: '职位',
    dataIndex: 'zhiWei',
    align: 'center',
    width: '100px',
  },
  {
    title: '上船船员名称',
    dataIndex: 'shangChuanYuanMing',
    align: 'center',
    width: '120px',
  },

  {
    title: '上船船员身份证号',
    dataIndex: 'shangChuanYuanShenFenHao',
    align: 'center',
    width: '150px',
  },

  {
    title: '下船船员名称',
    dataIndex: 'xiaChuanYuanMing',
    align: 'center',
    width: '150px',
  },

  {
    title: '下船船员身份证号',
    align: 'center',
    dataIndex: 'xiaChuanYuanShenFenHao',
    width: '150px',
  },

  {
    title: '预计上/下船日期',
    dataIndex: 'shangXiaChuanRiQi',
    align: 'center',
    width: '150px',
  },
  {
    title: '预计上/下船地点',
    align: 'center',
    dataIndex: 'shangXiaChuanDiDian',
    width: '150px',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'shenPiZhuangTai',
    width: '120px',
  },
  {

    title: '操作',
    dataIndex: 'operation',
    align: "center",
    fixed: "right",
    width: '160px',
  }
];

// 查询表格信息
const handleLoadData = async ()=>{
  if(dateArr.value && dateArr.value.length > 0) {
     queryParams.startDate = dateArr.value[0]
     queryParams.endDate = dateArr.value[1]
  }else{
    queryParams.startDate =""
    queryParams.endDate = ""
  }
  tableLoading.value = true
  const res = await useLoadChuanYuanDiaoLingApi(queryParams)
  tableLoading.value = false
  tableData.value = res.data.records
  total.value = res.data.total
}

// 搜索
const handleSearch = ()=>{
  queryParams.pageNo = 1;
  handleLoadData()
}

// 改变分页
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

const handleOpenAdd = ()=>{
  addLoading.value = true
  addRef.value.handleOpen()
  addLoading.value = false
}

const handleShowEdit = (id) => {
  showRef.value.handleOpen(id)
}

onMounted(()=>{
  handleLoadData()
})
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
